<template>
    <div class="swiperBox" id="swiperBox">
        <div class="swiper-container">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide><img src="./../assets/images/banner1.jpg" /></swiper-slide>
                <swiper-slide><img src="./../assets/images/banner2.jpg" /></swiper-slide>
                <swiper-slide><img src="./../assets/images/banner3.jpg" /></swiper-slide>
                <swiper-slide><img src="./../assets/images/banner4.jpg" /></swiper-slide>

            </swiper>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>
<script>
    import {swiper,swiperSlide} from "vue-awesome-swiper";
    export default {
        name:"swipert",
        data(){
            return {
                swiperOption: {
                    notNextTick: true,
                    loop:true,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination',
                      }
                }
            }
        },
       computed:{
           swiper() {
            return this.$refs.mySwiper.swiper
          }
        },
        components: {
            swiper,
            swiperSlide
        },
        mounted() {
            //this.swiper.slideTo(3, 1000, false);
        }
    }
</script>
<style lang="scss">
    // @import '../../assets/style/swiper.min.css';
    .swiperBox {
        .swiper-slide {
            width: 7.5rem;
            height: 150px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .swiper-pagination {
            width: 100%;
            bottom: 10px;
            height: 20px;
            line-height: 0px;
            .swiper-pagination-bullet {
                background: #fff;
                margin-left:10px;
                opacity: 1;
            }
            .swiper-pagination-bullet-active {
                background: #007aff;
            }
        }
    }
</style>
